<template>
  <div>

      <Alert type="success">
        项目日志
        <template slot="desc">项目进度状态不可逆，即当前只可以填写上一个进度或后面的进度阶段。 </template>
      </Alert>

  <Form ref="logInfo" :model="logInfo" :label-width="250" :rules="ruleInline" style="height:800px;">
    <FormItem label="项目进度" prop="project_state">
      <Select v-model="logInfo.project_state" style="width:200px;">
        <Option
          v-for="item in projectStateList"
          :value="item.value"
          :key="item.value"
        >{{ item.label }}
        </Option>
      </Select>
    </FormItem>
    <FormItem label="创建日期" prop="create_time">
      <DatePicker type="datetime" placeholder="创建日期" style="width: 200px"
                  v-model="logInfo.create_time"></DatePicker>
    </FormItem>
    <FormItem label="原计划完成日期" prop="planned_completion_date">
      <DatePicker type="datetime" placeholder="原计划完成日期" style="width: 200px"
                  v-model="logInfo.create_time"></DatePicker>
    </FormItem>
    <FormItem label="项目执行情况说明" prop="performance_statement">
      <Input v-model="logInfo.performance_statement" placeholder="项目执行情况说明"  type="textarea" :rows="4"></Input>
    </FormItem>

    <FormItem label="变更状态" prop="status">
      <!--<Input v-model="logInfo.status" placeholder="变更状态"></Input>-->
      <Select v-model="logInfo.status" style="width:200px;">
        <Option
          v-for="item in [{value:0,label:'无变更'},{value:1,label:'有变更'}]"
          :value="item.value"
          :key="item.value"
        >{{ item.label }}
        </Option>
      </Select>
    </FormItem>

    <FormItem label="支付阶段" prop="payment_stage">
      <Select v-model="logInfo.payment_stage" style="width:200px;">
        <Option
          v-for="item in [{value:1,label:'第1笔'},{value:2,label:'第2笔'},{value:3,label:'第3笔'},{value:4,label:'第4笔'},{value:5,label:'第5笔'}]"
          :value="item.value"
          :key="item.value"
        >{{ item.label }}
        </Option>
      </Select>
    </FormItem>

    <FormItem label="本阶段的支付进度" prop="payment_progress">
      <!--<Input v-model="logInfo.payment_progress" placeholder="本阶段的支付进度"></Input>-->
      <Select v-model="logInfo.payment_progress" style="width:200px;">
        <Option
          v-for="item in paymentProgressList"
          :value="item.value"
          :key="item.value"
        >{{ item.label }}
        </Option>
      </Select>
    </FormItem>
    <FormItem label="预计下一阶段完成时间" prop="estimated_completion">
      <DatePicker type="date" placeholder="预计下一阶段完成时间" style="width: 200px"
                  v-model="logInfo.estimated_completion"></DatePicker>
    </FormItem>
    <FormItem label="预计下一笔支付时间" prop="expect_next_payment">
      <DatePicker type="datetime" placeholder="预计下一笔支付时间" style="width: 200px"
                  v-model="logInfo.expect_next_payment"></DatePicker>
    </FormItem>
    <FormItem label="备注" prop="note">
      <Input v-model="logInfo.note" placeholder="备注" type="textarea" :rows="4"></Input>
    </FormItem>

    <FormItem>
      <Button type="primary" @click="post('logInfo',logInfo)">保存</Button>
    </FormItem>
  </Form>
  </div>
</template>
<script>
  import {log} from "@/api/supervision";
  import {
    Button,
    DatePicker,
    Form,
    FormItem,
    Input,
    InputNumber,
    Modal,
    Option,
    Radio,
    RadioGroup,
    Select,
    TabPane,
    Tabs,
    Tag,
    Alert
  } from "iview";
  //import {mapGetters} from "vuex";

  export default {
    components: {
      InputNumber,
      Button,
      Form,
      FormItem,
      Input,
      Tabs,
      TabPane,
      RadioGroup,
      Radio,
      Select,
      Option,
      Tag,
      Modal,
      DatePicker,
      Alert
    },
    data() {
      return {
        logInfo: {
          id: '',
          title: '',
        },
        ruleInline: {
          //title: [{required: true, message: "必须填写公司名称", trigger: "blur"}],
          //address: [{required: true, message: "必须填写公司地址", trigger: "blur"}],
        },
        project_id: 0,
        //必填，选项可编辑（默认选项：合同、需求、开发、到货、安装、测试、校验、培训、试运行、安全测评、第三方测评、符合性验收、专家验收）
        projectStateList: [
          {
            label: '合同',
            value: '合同'
          },
          {
            label: '需求',
            value: '需求'
          },
          {
            label: '开发',
            value: '开发'
          },
          {
            label: '到货',
            value: '到货'
          },
          {
            label: '安装',
            value: '安装'
          },
          {
            label: '测试',
            value: '测试'
          },
          {
            label: '校验',
            value: '校验'
          },
          {
            label: '培训',
            value: '培训'
          },
          {
            label: '试运行',
            value: '试运行'
          },
          {
            label: '安全测评',
            value: '安全测评'
          },
          {
            label: '符合性验收',
            value: '符合性验收'
          },
          {
            label: '专家验收',
            value: '专家验收'
          }
        ],
//payment_progress//必选，包括：未支付，已支付，办理申请中，已提交申请，其他情况（备注）
        paymentProgressList: [
          {
            label: '未支付',
            value: '未支付'
          },          {
            label: '已支付',
            value: '已支付'
          },          {
            label: '办理申请中',
            value: '办理申请中'
          },          {
            label: '已提交申请',
            value: '已提交申请'
          },          {
            label: '其他情况',
            value: '其他情况'
          },

        ],
      };
    },
    methods: {
      post(type, data) {

        if(type === 'logInfo') {
          this.$refs["logInfo"].validate(valid => {
            if(valid) {
              data['project_id'] = this.project_id;

              if(data.id) {
                //更新数据
                log.update(data.id, data).then(res => {
                  if(res.errno !== 0) {
                    this.$Message.error(res.errmsg);
                  } else {
                    //this.$router.push("/supervision/project/list");
                    this.$router.push({
                      path: "/supervision/log/list",
                      query: {
                        project_id: this.project_id,
                      }
                    });
                  }
                });
              } else {
                //新增数据
                log.create(data).then(res => {
                  if(res.errno !== 0) {
                    this.$Message.error(res.errmsg);
                  } else {
                    //this.$router.push("/supervision/project/list");
                    this.$router.push({
                      path: "/supervision/log/list",
                      query: {
                        project_id: this.project_id,
                      }
                    });
                  }
                });
              }
            } else {
              this.$Message.error("请填写必要信息");
            }
          });
        }
      },
      get(id) {
        log.getInfo(id, {}).then(res => {
          this.logInfo = res.data;
        });
      },
    },
    computed: {
      //...mapGetters(["getUser"])
    },
    mounted() {
      if(this.$route.query.project_id) {
        this.project_id = this.$route.query.project_id;
      }

      if(this.$route.query.id) {
        this.get(this.$route.query.id);
      }
    }
  };
</script>
